<template>
	<div class="Olist">
		<h3>类别列表</h3>
		<div class="Ocontent">
			<div class="Oslider">
				<ul>
					<li :class="ID==item.id ? sliderSelect :'' " v-for="item of CategoryList" :key="item.id" @click="handleSilder(item.id)">{{item.mallCateforyName}}</li>
				</ul>
			</div>
			<div class="Otop">
				<div class="Otop1">
					<ul>
						<li :class="idTop==item.id ? topSelect :'' " v-for="item of CategorySubList" :key="item.id" @click="handleTop(item.id)">{{item.mallSubName}}</li>
					</ul>
				</div>

			</div>
			<div class="Olists">
				<ul>
					<router-link tag="li" v-for="item of getGoodsList" :key="item.id" :to="{name:'goodsDetails',params:{id:item.id}}">
						<div class="Oimg">
							<img :src="item.image1" alt="图片加载失败" />
						</div>
						<div class="OtwoP">
							<p class="Op">{{item.name}}</p>
							<p>{{item.presentPrice | rmb}}</p>
						</div>
					</router-link>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCategoryList,
		getCategorySubList,
		getGoodsListByCategorySubID
	} from '@/commonApi/request.js'
	export default {
		props: ["id"],
		data() {
			return {
				idTop: 0,
				ID: this.id,
				CategoryList: [],
				CategorySubList: [],
				getGoodsList: [],
				sliderSelect: 'sliderSelect',
				topSelect: 'topSelect'
			}
		},
		methods: {
			// 读取大类数据
			async getSilderData() {
				let _self = this
				let {
					data
				} = await getCategoryList()
				_self.CategoryList = data.data
				console.log(_self.CategoryList)
			},
			//读取小类的数据
			async getTopData(id) {
				let _self = this
				let params = {
					categoryId: id
				}
				let {
					data
				} = await getCategorySubList(params)
				_self.CategorySubList = data.data
				console.log(_self.CategorySubList)
				return data

			},
			//根据类别获取商品列表
			async getContentData(id) {
				let _self = this
				let params = {
					categorySubId: id
				}
				let {
					data
				} = await getGoodsListByCategorySubID(params)
				_self.getGoodsList = data.data
				// console.log(data)

			},
			async getAllData() {
				let _self = this
				if (_self.id) {
					let config = _self.id
					await _self.getSilderData()
					await _self.getTopData(config)
					await _self.getContentData(_self.CategorySubList[0].id)
				} else {
					await _self.getSilderData()
					await _self.getTopData(_self.CategoryList[0].id)
					await _self.getContentData(_self.CategorySubList[0].id)
				}
			},
			handleSilder(id) {
				let _self = this
				_self.ID = id
				_self.getTopData(id).then(function(res) {
					// console.log(res)
					_self.getContentData(res.data[0].id)
					_self.handleTop(res.data[0].id)
				})
			},
			handleTop(id) {
				let _self = this
				
				_self.getContentData(id)
				_self.idTop = id
			}

		},
		created() {
			this.getAllData()
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.Olist {
		h3 {

			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			border-bottom: 1px solid #ccc;
		}

		.Ocontent {

			.Oslider {
				float: left;
				top: 40px;
				width: 100px;
				height: 600px;
				font-size: 16px;
				text-align: center;
				background-color: #f0f8ff;
				overflow: hidden;

				ul {
					width: 117px;
					height: 600px;
					overflow-y: scroll;
					
					li {
						width: 100px;
						height: 40px;
						line-height: 40px;
						font-weight: 500;
						border-bottom: 1px solid #ccc;
						
					}
					
				}
			}

			.Otop {
				float: left;
				height: 40px;
				border-bottom: 1px solid #ccc;
				line-height: 40px;
				width: 275px;
				text-align: center;
				font-size: 15px;
				overflow: hidden;

				.Otop1 {
					overflow: hidden;
					width: 500px;
					height: 40px;

					ul {

						width: 500px;
						white-space: nowrap;
						height: 57px;
						overflow-x: scroll;

						li {

							height: 40px;
							line-height: 40px;
							width: 80px;
							float: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}

			.Olists {
				float: left;
				height: 560px;
				width: 275px;
				// overflow: hidden;

				ul {

					width: 275px;
					height: 560px;
					overflow-y: scroll;

					li {

						width: 100%;
						height: 75px;
						margin-bottom: 15px;

						.Oimg {
							float: left;
							width: 75px;
							height: 75px;

							img {
								width: 100%;
								height: 100%;

							}
						}

						.OtwoP {
							float: left;
							text-align: left;
							font-size: 16px;
							width: 190px;
							margin-left: 5px;

							p {
								margin-top: 12px;
								width: 100%;
								height: 30px;
								line-height: 20px;
								white-space: pre-wrap;
							}
						}
					}
				}
			}
		}
	}

	.sliderSelect {
		background-color: white;
	}
	
	.topSelect {
		color: #ff4444;
		border-bottom: 1px solid #ff4444;
	}
</style>
